import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './opWarning.less';
import getUrlParam from '@/utils/getUrlParam';
import { Tabs, Select } from 'antd';
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom';
import bScore from './ExoticIndex/bScore';
import mScore from './ExoticIndex/mScore';
import router from 'umi/router';
import altmanZ from './ExoticIndex/altmanZ';
// import DetailBlock from '@/components/Detail';

@connect(({ opwarning }) => ({
  FDAbnormalData: opwarning.FDAbnormalData,
  FSAbnormalData: opwarning.FSAbnormalData,
  QpzsData: opwarning.QpzsData,
  MajorFormData: opwarning.MajorFormData,
}))
class opWarning extends Component {
  componentDidMount() {
    router.push('/Warning/opWarning/bScore');
    const { dispatch } = this.props;

    dispatch({
      type: 'opwarning/getFDAbnormalData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opwarning/getFSAbnormalData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opwarning/getQpzsData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opwarning/getMainReport',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        tab: '利润表',
        type: '利润对比',
        time: '2019-06-30',
      },
    });
  }

  render() {
    const TabPane = Tabs.TabPane;
    const Option = Select.Option;
    let { FDAbnormalData, FSAbnormalData, QpzsData, MajorFormData, dispatch } = this.props;
    let callback = key => {
      // console.log(key);
    };

    let renderFDAbnormal = () => {
      //获取财务数据异常变动
      // console.log(FDAbnormalData);
      let res = [];
      if (!FDAbnormalData || !FDAbnormalData.data) {
        return <p className={styles.noAbnromal}>贵公司暂无财务数据异常</p>;
      }
      for (let i = 0; i < FDAbnormalData.data.data_list.length; i++) {
        res.push(
          <li className={i % 2 === 0 ? styles.grayBg : ''} key={i}>
            <div className={styles.listTitle}>
              <span className="fl">
                {FDAbnormalData.data.data_list[i].first_item_name}{' '}
                <font className={styles.orange}>
                  {FDAbnormalData.data.data_list[i].first_item_value}
                </font>
              </span>
              <span className="fr">{FDAbnormalData.data.data_list[i].first_item_date}</span>
            </div>

            <div className={styles.listDesc}>
              <span className="fl">
                {FDAbnormalData.data.data_list[i].second_item_name}{' '}
                <font className={styles.orange}>
                  {FDAbnormalData.data.data_list[i].second_item_value}
                </font>
              </span>
            </div>
          </li>
        );
      }
      return res;
    };

    let renderFSAbnormal = () => {
      //获取财务科目异常
      // console.log(FSAbnormalData);

      if (!FSAbnormalData || !FSAbnormalData.data) {
        return <p className={styles.noAbnromal}>贵公司暂无财务科目异常</p>;
      }

      let res = (
        <div>
          <p className={styles.abnormalTitle}>
            <font>{FSAbnormalData.data.first_item_name}:</font>
          </p>
          <div className={styles.abnormalCell}>{FSAbnormalData.data.first_item_value}</div>
          <p className={styles.abnormalTitle}>
            <font>{FSAbnormalData.data.second_item_name}:</font>
          </p>
          <div className={styles.abnormalCell}>{FSAbnormalData.data.second_item_value}</div>
        </div>
      );
      return res;
    };

    let renderQpzs = () => {
      //获取奇葩指数异常
      let res = [
        <p style={{ fontWeight: 'bold' }} key="1">
          本期奇葩指数是指：
        </p>,
      ];
      if (!QpzsData || !QpzsData.data) {
        return <p className={styles.noAbnromal}>贵公司暂无奇葩指数异常</p>;
      }
      let qpzsKey = Object.keys(QpzsData.data.data_list[0])[0];
      let qpzsValue = QpzsData.data.data_list[0][Object.keys(QpzsData.data.data_list[0])[0]];
      res.push(
        <p key="2">
          {qpzsKey} {qpzsValue}
        </p>
      );
      return res;
    };

    let getAbs = num => {
      return Math.abs(num).toFixed(2);
    };
    let fixColor = num => {
      let colorString = 'transparent';
      if (num < 0) {
        colorString = 'rgba(208,2,27,' + getAbs(num) + ')';
      } else {
        colorString = 'rgba(22,144,255,' + getAbs(num) + ')';
      }
      return colorString;
    };

    let renderForm = () => {
      //渲染数据表格
      let res = [];

      if (!MajorFormData || !MajorFormData.data) {
        return (
          <tr>
            <td>暂无数据</td>
          </tr>
        );
      }
      // console.log(MajorFormData.data.charts[0].data[0].data[0].data.numbers);
      let formData = MajorFormData.data.value;
      // console.log(formData);
      // return '';
      for (let i = 0; i < formData.length; i++) {
        res.push(
          <tr key={i}>
            <td>{formData[i].item}</td>
            <td>
              <span
                className={styles.colorfulNum}
                style={{
                  backgroundColor: fixColor(formData[i].feature),
                  color: getAbs(formData[i].feature) < 0.1 ? '#666' : '#fff',
                }}
              >
                {formData[i].feature}
              </span>
            </td>
            <td>
              <span
                className={styles.colorfulNum}
                style={{
                  backgroundColor: fixColor(formData[i].periods),
                  color: getAbs(formData[i].periods) < 0.1 ? '#666' : '#fff',
                }}
              >
                {formData[i].periods}
              </span>
            </td>
            <td>{getAbs(formData[i].feature - formData[i].periods)}</td>
          </tr>
        );
      }
      return res;
    };

    let getChangeTime = value => {
      // console.log(value);
      dispatch({
        type: 'opwarning/getMainReport',
        payload: {
          secu_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000000111',
          tab: '利润比对',
          type: '利润表',
          time: '2018-06-30',
        },
      });
    };

    return (
      <div className={[styles.opWarning, 'clearfix'].join(' ')}>
        <div className={['fl', styles.leftBlock].join(' ')}>
          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>财务科目异常变动</p>
            </div>
            <div className={[styles.blockBody, styles.paddingBody].join(' ')}>
              {renderFSAbnormal()}
            </div>
          </div>

          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>财务数据异常变动</p>
            </div>
            <div className={[styles.blockBody, styles.paddingBody].join(' ')}>
              <ul className={styles.abnormalList}>{renderFDAbnormal()}</ul>
            </div>
          </div>

          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>奇葩指数异常预警</p>
            </div>
            <div className={[styles.blockBody, styles.paddingBody].join(' ')}>{renderQpzs()}</div>
          </div>
        </div>
        <div className={['fr', styles.rightBlock].join(' ')}>
          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>特征比对</p>
            </div>
            <div className={[styles.blockBody, styles.paddingBody, 'sp-tab'].join(' ')}>
              <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="利润表" key="1">
                  <div className={[styles.sheetCont, 'clearfix'].join(' ')}>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">利润对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">营收对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                  </div>
                </TabPane>
                <TabPane tab="现金流量表" key="2">
                  <div className={[styles.sheetCont, 'clearfix'].join(' ')}>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">利润对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">营收对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                  </div>
                </TabPane>
                <TabPane tab="资产负债表" key="3">
                  <div className={[styles.sheetCont, 'clearfix'].join(' ')}>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">利润对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                    <table className="fl" border="1">
                      <thead>
                        <tr>
                          <th colSpan="4">营收对比</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>科目</td>
                          <td>稳态特征</td>
                          <td>
                            <Select
                              defaultValue="2018-06-30"
                              style={{ width: 120 }}
                              onChange={getChangeTime}
                            >
                              <Option value="2018-06-30">2018-06-30</Option>
                              <Option value="2018-07-30">2018-07-30</Option>
                              <Option value="2018-08-30">2018-08-30</Option>
                              <Option value="2018-09-30">2018-09-30</Option>
                            </Select>
                          </td>
                          <td>差值</td>
                        </tr>
                        {renderForm()}
                      </tbody>
                    </table>
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </div>

          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>奇葩指数</p>
            </div>
            <div className={[styles.blockBody, styles.paddingBody, styles.noPadding].join(' ')}>
              <ul className={[styles.navWrap, 'clearfix'].join(' ')}>
                <li>
                  <NavLink activeClassName={styles.actNav} to="/Warning/opWarning/bScore">
                    B-Score数据异常指数
                  </NavLink>
                </li>
                <li>
                  <NavLink activeClassName={styles.actNav} to="/Warning/opWarning/mScore">
                    M-Score财务操纵指数
                  </NavLink>
                </li>
                <li>
                  <NavLink activeClassName={styles.actNav} to="/Warning/opWarning/altmanZ">
                    Altman-Z破产指数
                  </NavLink>
                </li>
              </ul>

              <Route path="/Warning/opWarning/bScore" component={bScore} />
              <Route path="/Warning/opWarning/mScore" component={mScore} />
              <Route path="/Warning/opWarning/altmanZ" component={altmanZ} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default opWarning;
